<!--<!DOCTYPE html>-->
<!--<html lang="zh-CN">-->
<!--<head>-->
<!--    <meta charset="UTF-8">-->
<!--    <meta name="viewport" content="width=device-width, initial-scale=1.0">-->
<!--    <title>七夜聊天室</title>-->
<!--    <style>-->
<!--        :root {-->
<!--            &#45;&#45;primary-color: #4a90e2;-->
<!--            &#45;&#45;secondary-color: #f5f5f5;-->
<!--            &#45;&#45;text-color: #333;-->
<!--            &#45;&#45;time-color: #888;-->
<!--            &#45;&#45;border-color: #ddd;-->
<!--            &#45;&#45;input-bg: #fff;-->
<!--            &#45;&#45;message-bg: #e6f2ff;-->
<!--            &#45;&#45;system-message: #f0f0f0;-->
<!--        }-->

<!--        * {-->
<!--            margin: 0;-->
<!--            padding: 0;-->
<!--            box-sizing: border-box;-->
<!--            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;-->
<!--        }-->

<!--        body {-->
<!--            background-color: var(&#45;&#45;secondary-color);-->
<!--            height: 100vh;-->
<!--            display: flex;-->
<!--            justify-content: center;-->
<!--            align-items: center;-->
<!--            padding: 20px;-->
<!--        }-->

<!--        .chat-container {-->
<!--            width: 100%;-->
<!--            max-width: 900px;-->
<!--            height: 80vh;-->
<!--            background-color: white;-->
<!--            border-radius: 12px;-->
<!--            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);-->
<!--            display: flex;-->
<!--            flex-direction: column;-->
<!--        }-->

<!--        .chat-header {-->
<!--            background-color: var(&#45;&#45;primary-color);-->
<!--            color: white;-->
<!--            padding: 15px 20px;-->
<!--            border-radius: 12px 12px 0 0;-->
<!--            display: flex;-->
<!--            justify-content: space-between;-->
<!--            align-items: center;-->
<!--        }-->

<!--        .chat-title {-->
<!--            font-size: 1.5rem;-->
<!--            font-weight: 600;-->
<!--        }-->

<!--        .chat-status {-->
<!--            background-color: rgba(255, 255, 255, 0.2);-->
<!--            padding: 5px 10px;-->
<!--            border-radius: 20px;-->
<!--            font-size: 0.8rem;-->
<!--        }-->

<!--        .chat-messages {-->
<!--            flex: 1;-->
<!--            padding: 20px;-->
<!--            overflow-y: auto;-->
<!--            display: flex;-->
<!--            flex-direction: column;-->
<!--            gap: 15px;-->
<!--        }-->

<!--        .message {-->
<!--            max-width: 70%;-->
<!--            padding: 12px 15px;-->
<!--            border-radius: 15px;-->
<!--            word-break: break-word;-->
<!--            position: relative;-->
<!--        }-->

<!--        .message-content {-->
<!--            margin-top: 10px;-->
<!--        }-->

<!--        .message-info {-->
<!--            display: flex;-->
<!--            justify-content: space-between;-->
<!--            font-size: 0.8rem;-->
<!--            margin-bottom: 5px;-->
<!--        }-->

<!--        .message-username {-->
<!--            font-weight: 600;-->
<!--            color: var(&#45;&#45;text-color);-->
<!--        }-->

<!--        .message-time {-->
<!--            color: var(&#45;&#45;time-color);-->
<!--        }-->

<!--        .message.sent {-->
<!--            align-self: flex-end;-->
<!--            background-color: var(&#45;&#45;message-bg);-->
<!--            border-radius: 15px 15px 0 15px;-->
<!--        }-->

<!--        .message.received {-->
<!--            align-self: flex-start;-->
<!--            background-color: var(&#45;&#45;secondary-color);-->
<!--        }-->

<!--        .system-message {-->
<!--            align-self: center;-->
<!--            background-color: var(&#45;&#45;system-message);-->
<!--            padding: 10px 15px;-->
<!--            border-radius: 15px;-->
<!--            max-width: 60%;-->
<!--            text-align: center;-->
<!--            font-style: italic;-->
<!--            color: var(&#45;&#45;primary-color);-->
<!--        }-->

<!--        .chat-input {-->
<!--            padding: 20px;-->
<!--            border-top: 1px solid var(&#45;&#45;border-color);-->
<!--            display: flex;-->
<!--            gap: 15px;-->
<!--        }-->

<!--        .input-group {-->
<!--            display: flex;-->
<!--            flex: 1;-->
<!--            gap: 15px;-->
<!--        }-->

<!--        .input-field {-->
<!--            flex: 1;-->
<!--            padding: 12px 15px;-->
<!--            border: 1px solid var(&#45;&#45;border-color);-->
<!--            border-radius: 8px;-->
<!--            background-color: var(&#45;&#45;input-bg);-->
<!--            font-size: 1rem;-->
<!--            transition: border-color 0.3s;-->
<!--        }-->

<!--        .input-field:focus {-->
<!--            outline: none;-->
<!--            border-color: var(&#45;&#45;primary-color);-->
<!--            box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.2);-->
<!--        }-->

<!--        .input-label {-->
<!--            margin-bottom: 5px;-->
<!--            font-size: 0.9rem;-->
<!--            color: var(&#45;&#45;text-color);-->
<!--        }-->

<!--        .chat-buttons {-->
<!--            display: flex;-->
<!--            gap: 10px;-->
<!--        }-->

<!--        .chat-button {-->
<!--            padding: 12px 20px;-->
<!--            border: none;-->
<!--            border-radius: 8px;-->
<!--            background-color: var(&#45;&#45;primary-color);-->
<!--            color: white;-->
<!--            font-size: 1rem;-->
<!--            cursor: pointer;-->
<!--            transition: background-color 0.3s;-->
<!--        }-->

<!--        .chat-button:hover {-->
<!--            background-color: #3a80d2;-->
<!--        }-->

<!--        .chat-button.secondary {-->
<!--            background-color: #f0f0f0;-->
<!--            color: var(&#45;&#45;text-color);-->
<!--        }-->

<!--        .chat-button.secondary:hover {-->
<!--            background-color: #e0e0e0;-->
<!--        }-->

<!--        @media (max-width: 768px) {-->
<!--            .chat-container {-->
<!--                height: 90vh;-->
<!--            }-->

<!--            .input-group {-->
<!--                flex-direction: column;-->
<!--                gap: 15px;-->
<!--            }-->

<!--            .chat-buttons {-->
<!--                margin-top: 15px;-->
<!--                width: 100%;-->
<!--            }-->

<!--            .chat-button {-->
<!--                flex: 1;-->
<!--            }-->
<!--        }-->
<!--    </style>-->
<!--</head>-->
<!--<body>-->
<!--<div class="chat-container">-->
<!--    <div class="chat-header">-->
<!--        <div class="chat-title">七夜聊天室</div>-->
<!--        <div class="chat-status">已连接</div>-->
<!--    </div>-->
<!--    <div class="chat-messages" id="chatMessages">-->
<!--        &lt;!&ndash; 消息将在这里动态添加 &ndash;&gt;-->
<!--    </div>-->
<!--    <div class="chat-input">-->
<!--        <div class="input-group">-->
<!--            <label class="input-label">用户名称</label>-->
<!--            <input type="text" class="input-field" placeholder="请输入用户名" id="usernameInput">-->
<!--            <button class="chat-button" id="connButton" onclick="conn()">连接</button>-->
<!--        </div>-->
<!--        <div class="input-group">-->
<!--            <label class="input-label">消息内容</label>-->
<!--            <input type="text" class="input-field" placeholder="请输入内容" id="messageInput">-->
<!--        </div>-->
<!--        <div class="chat-buttons">-->
<!--            <button class="chat-button" id="sendButton">发送</button>-->
<!--            <button class="chat-button secondary" id="clearButton">清屏</button>-->
<!--        </div>-->
<!--    </div>-->
<!--</div>-->

<!--<script>-->
<!--    let serverUrl = 'http://localhost:9091';-->
<!--    let wsUrl = 'ws://localhost:9091/chat';-->
<!--    let ws;-->
<!--    let wsErr = false;-->
<!--    function doConnect(userId) {-->
<!--        ws = new WebSocket(`${wsUrl}?userId=${userId}`);-->
<!--        ws.onclose = () => {-->

<!--            showSystemMessage('聊天室已断开');-->
<!--            setInterval(() => {-->
<!--                if (!wsErr){-->
<!--                    doConnect(userId)-->
<!--                    wsErr = true-->
<!--                }-->
<!--            }, 5000);-->
<!--        };-->

<!--        ws.onopen = () => {-->
<!--            wsErr = true;-->
<!--            showSystemMessage('聊天室已连接');-->
<!--        };-->

<!--        ws.onmessage = (event) => {-->
<!--            let data = event.data;-->
<!--            try {-->
<!--                let msg = JSON.parse(data);-->
<!--                showMessage(msg);-->
<!--            } catch (err) {-->
<!--                showSystemMessage(String(data));-->
<!--            }-->
<!--        };-->
<!--    }-->

<!--    let chatMessages = document.getElementById('chatMessages');-->
<!--    let usernameInput = document.getElementById('usernameInput');-->
<!--    let messageInput = document.getElementById('messageInput');-->
<!--    let sendButton = document.getElementById('sendButton');-->
<!--    let clearButton = document.getElementById('clearButton');-->

<!--    function getLocalizedMessageTime(timestamp) {-->
<!--        return new Date(timestamp).toLocaleTimeString();-->
<!--    }-->

<!--    function createMessageElement(msg) {-->
<!--        let messageElement = document.createElement('div');-->
<!--        messageElement.className = `message ${msg.sent ? 'sent' : 'received'}`;-->

<!--        let messageInfo = document.createElement('div');-->
<!--        messageInfo.className = 'message-info';-->

<!--        let usernameElement = document.createElement('span');-->
<!--        usernameElement.className = 'message-username';-->
<!--        usernameElement.textContent = msg.username;-->

<!--        let timeElement = document.createElement('span');-->
<!--        timeElement.className = 'message-time';-->
<!--        timeElement.textContent = getLocalizedMessageTime(msg.time || Date.now());-->

<!--        messageInfo.appendChild(usernameElement);-->
<!--        messageInfo.appendChild(timeElement);-->

<!--        let messageContent = document.createElement('div');-->
<!--        messageContent.className = 'message-content';-->
<!--        messageContent.textContent = msg.message;-->

<!--        messageElement.appendChild(messageInfo);-->
<!--        messageElement.appendChild(messageContent);-->

<!--        return messageElement;-->
<!--    }-->

<!--    function createSystemMessageElement(msg) {-->
<!--        let messageElement = document.createElement('div');-->
<!--        messageElement.className = 'system-message';-->
<!--        messageElement.textContent = msg;-->

<!--        return messageElement;-->
<!--    }-->

<!--    function showMessage(msg) {-->
<!--        let messageElement = createMessageElement(msg);-->
<!--        chatMessages.appendChild(messageElement);-->
<!--        scrollToBottom();-->
<!--    }-->

<!--    function showSystemMessage(msg) {-->
<!--        let messageElement = createSystemMessageElement(msg);-->
<!--        chatMessages.appendChild(messageElement);-->
<!--        scrollToBottom();-->
<!--    }-->

<!--    function scrollToBottom() {-->
<!--        chatMessages.scrollTop = chatMessages.scrollHeight;-->
<!--    }-->

<!--    function sendMsg() {-->
<!--        let username = usernameInput.value.trim();-->
<!--        let message = messageInput.value.trim();-->

<!--        if (!username) {-->
<!--            showSystemMessage('用户名称未填写');-->
<!--            return;-->
<!--        }-->

<!--        if (!message) {-->
<!--            showSystemMessage('消息内容未填写');-->
<!--            return;-->
<!--        }-->

<!--        localStorage.setItem('username', username);-->
<!--        messageInput.value = '';-->

<!--        let msg = {-->
<!--            username,-->
<!--            message,-->
<!--            time: Date.now()-->
<!--        };-->

<!--        showMessage({...msg, sent: true});-->
<!--        ws.send(JSON.stringify(msg));-->
<!--    }-->

<!--    function conn() {-->
<!--        let username = usernameInput.value.trim();-->
<!--        let message = messageInput.value.trim();-->

<!--        if (!username) {-->
<!--            showSystemMessage('用户名称未填写');-->
<!--            return;-->
<!--        }-->
<!--        //建立连接-->
<!--        doConnect(username)-->

<!--    }-->
<!--    function clearMessages() {-->
<!--        chatMessages.innerHTML = '';-->
<!--    }-->

<!--    async function loadHistory() {-->
<!--        try {-->
<!--            let res = await fetch(`${serverUrl}/ChatHistory1/listHistory?pageNumber=1&pageSize=1000`);-->
<!--            let json = await res.json();-->

<!--            if (json.data && json.data.records) {-->
<!--                json.data.records.forEach(his => {-->
<!--                    showMessage({-->
<!--                        username: his.username,-->
<!--                        message: his.message,-->
<!--                        time: his.time,-->
<!--                        sent: false-->
<!--                    });-->
<!--                });-->
<!--            }-->
<!--        } catch (error) {-->
<!--            console.error('加载历史消息失败:', error);-->
<!--        }-->
<!--    }-->

<!--    document.body.onload = async () => {-->
<!--        sendButton.addEventListener('click', sendMsg);-->
<!--        clearButton.addEventListener('click', clearMessages);-->

<!--        messageInput.addEventListener('keypress', (e) => {-->
<!--            if (e.key === 'Enter') {-->
<!--                sendMsg();-->
<!--            }-->
<!--        });-->

<!--        // usernameInput.addEventListener('change', () => {-->
<!--        //     let userId = usernameInput.value.trim();-->
<!--        //     if (userId) {-->
<!--        //         doConnect(userId);-->
<!--        //     }-->
<!--        // });-->

<!--        usernameInput.value = localStorage.getItem('username') || '游客';-->
<!--        clearMessages();-->
<!--        await loadHistory();-->
<!--        scrollToBottom();-->
<!--    };-->
<!--</script>-->
<!--</body>-->
<!--</html>-->